package com.kmmlearn.findtime.android.ui.animation

import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.updateTransition
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.kmmlearn.findtime.android.R


enum class SwitchState {
    ON, OFF
}

@Composable
fun AnimationDemo1() {

    var selectedState by remember { mutableStateOf(SwitchState.OFF) }

    // 创建动画
    val transition = updateTransition(targetState = selectedState)

    // 创建对应的动画变量
    val textAlpha by transition.animateFloat { if (it == SwitchState.ON) 0f else 1f }
    val bottomBarPadding by transition.animateDp { if (it == SwitchState.ON) 0.dp else 40.dp }


    Box(
        modifier = Modifier
            .size(150.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(Color.White)
            .clickable(onClick = {
                selectedState =
                    if (selectedState == SwitchState.ON) SwitchState.OFF else SwitchState.ON
            })
    ) {
        // ContentScale.FillBounds: 拉伸图像填满整个组件区域，可能改变图像宽高比
        //ContentScale.Fit: 保持图像原始比例，完整显示图像，可能在周围留有空白
        //ContentScale.Crop: 保持比例并填满组件，但可能裁剪图像部分区域
        //ContentScale.None: 使用图像原始尺寸，不进行缩放
        Image(
            painter = painterResource(id = R.drawable.nezha),
            contentDescription = "nezha",
            contentScale = ContentScale.FillBounds
        )
        Text(
            text = "点我",
            fontSize = 30.sp,
            color = Color.White,
            fontWeight = FontWeight.W900,
            modifier = Modifier
                .align(Alignment.Center)
                .alpha(textAlpha)
        )
        Box(
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .fillMaxWidth()
                .height(40.dp)
                .padding(top = bottomBarPadding)
                .background(Color(0xFF5FB878))
        ) {
            Row(
                modifier = Modifier
                    .align(Alignment.Center)
                    .alpha(1 - textAlpha),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    Icons.Filled.Favorite,
                    contentDescription = "favorite",
                    tint = Color.White
                )
                Spacer(modifier = Modifier.width(5.dp))
                Text(
                    text = "已收藏",
                    fontSize = 20.sp,
                    color = Color.White,
                    fontWeight = FontWeight.Bold,
                )
            }
        }
    }

}


@Preview
@Composable
fun AnimationDemo1Preview() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        contentAlignment = Alignment.Center
    ) {
        AnimationDemo1()
    }
}